<!-- 素材库弹窗 -->
<template>
  <a-modal v-model:visible="vdata.visible" width="60%" title="选择素材" :footer="null">
    <template v-if="materialInfo['items']?.length > 0">
      <div v-if="vdata.key" class="waterfall">
        <div v-for="item in materialInfo['items']" class="waterfall-item">
          <img :src="item['url']" referrerPolicy="no-referrer">
          <p>{{ item['name'] }}</p>
          <a-button type="primary" @click="selectMedia(item)">选 择</a-button>
        </div>
      </div>
      <div v-else class="waterfall">
        <div v-for="item in materialInfo['items']" class="waterfall-item">
          <img :src="item['imgUrl']" referrerPolicy="no-referrer">
          <a-button type="primary" @click="selectMedia(item)">选 择</a-button>
        </div>
      </div>
      <!-- 分页 -->
      <a-pagination
        v-model:current="vdata.current"
        v-model:pageSize="vdata.pageSize"
        show-size-changer
        :total="materialInfo['totalCount']"
        :show-total="total => `共${total}条`"
        show-less-items
        :pageSizeOptions="['10', '20']"
        style="margin-top: 24px;"
      />
    </template>
    <a-empty v-else />
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref, defineExpose, watch } from 'vue'
import { req, API_URL_MATERIAL_LIST } from '@/api/manage'
import {$apiOfficialReplyGetMaterialList,$apiOfficialMediaGetMaterialImgList} from '@/api/components/GzMessageBox/GzMaterialModal/index'
import storage from 'store'
import { sm4DecryptByResData } from '@/utils/encryptUtil'

const emits = defineEmits(['update:value','udateMaterials'])

// 数据源
const vdata = reactive({
  appid: '',  //   应用ID
  key: '',  //   素材类型
  visible: false,
  current: 1,
  pageSize: 10,
  officialAppId:'',
  activityTemplateNo:''
})

const materialInfo = ref({
  items: [],
})

/**
 * 分页变化
 */
// 页码变化
watch(() => vdata.current, () => {
  if(vdata.key){
    // 请求素材列表
  fetchMediaList({ appid: vdata.appid, type: vdata.key, beginSize: (vdata.current - 1) * vdata.pageSize, endSize: vdata.pageSize })
  }else{
    // 请求素材列表
  fetchMediaList({ officialAppId: vdata.officialAppId,activityTemplateNo:vdata.activityTemplateNo, beginSize: (vdata.current - 1) * vdata.pageSize, endSize: vdata.pageSize })
  }
})
// 页大小变化
watch(() => vdata.pageSize, () => {
  // 请求素材列表
  vdata.current = 1
  if(vdata.key){
    fetchMediaList({ appid: vdata.appid, type: vdata.key, beginSize: 0, endSize: vdata.pageSize })
  }else{
    fetchMediaList({ officialAppId: vdata.officialAppId,activityTemplateNo:vdata.activityTemplateNo, beginSize: 0, endSize: vdata.pageSize })
  }
  
})

/**
 * 请求素材列表
 */
async function fetchMediaList(params){
  console.log(params,'素材列表接口')
  if(vdata.key){
    $apiOfficialReplyGetMaterialList(params).then(res => {
    Object.assign(materialInfo.value, res)
  })
  }else{
    $apiOfficialMediaGetMaterialImgList(params).then(res=>{

      Object.assign(materialInfo.value.items, res.records)
      // console.log(res,materialInfo.value.materialLst,88888)
    })
  }
  
}
/**
 * 素材选择
 */
function selectMedia(item){
  if(vdata.key){
    emits('update:value', { repMediaId: item.mediaId, repUrl: item.url, repName: item.name })
  }else{
    emits('udateMaterials', { repMediaId: item.mediaId, repUrl: item.imgUrl})
  }
  
  vdata.visible = false
}

/**
 * 显示弹窗
 * @param key 素材类型
 */
async function show(key,officialAppId,activityTemplateNo){
  console.log(officialAppId,'officialAppId')
  console.log(key,'key')
  // 初始化数据
  vdata.pageSize = 10
  vdata.current = 1
  // vdata.appid = sm4DecryptByResData(storage.get('AD'))   
  if(key){
    vdata.appid = storage.get('AD')
  }else{
    materialInfo.value.items = []
    vdata.officialAppId = officialAppId
  }
  
  console.log(vdata.appid,'appid素材')
  vdata.key = key
  // 活动编号
  vdata.activityTemplateNo = activityTemplateNo


  if(key){
// 请求素材列表
await fetchMediaList({ appid: vdata.appid, type: key, beginSize: 0, endSize: 10 })
  }else{
    // 请求素材列表
  await fetchMediaList({ officialAppId: vdata.officialAppId,activityTemplateNo:activityTemplateNo, beginSize: 0, endSize: 10 })
  }
  
  vdata.visible = true
}

defineExpose({
  show
})

</script>

<style lang="less" scoped>
.waterfall{
  column-count:3;
  margin:0 auto;
  column-gap: 20px;

  .waterfall-item{
    border: 2px solid #eee;
    break-inside: avoid;
    margin-bottom: 20px;
    padding: 10px;
    img{
      width: 100%;
    }
    p{
      margin-top: 10px;
    }
  }
}

</style>